<!--  -->
<template>
  <div class="index">
    <div class="three index">
      <div class=" header flex middle">
        <dv-decoration-8 :color="['#0c9df7', '#1d71e0']" class="header-left" />
        <dv-decoration-5
          :color="['#0c9df7', '#1d71e0']"
          class="header-center"
        />
        <dv-decoration-8
          :color="['#0c9df7', '#1d71e0']"
          class="header-right"
          :reverse="true"
        />
        <dv-decoration-7 :color="['#0c9df7', '#1d71e0']" class="header-title">
          &nbsp; 可视化大屏 &nbsp;
        </dv-decoration-7>
        <div class=" header-tip left flex middle">
          <img :src="imgSrc" alt="" class="ico" />
          <span class="l ml10">{{ weatcherData.tem }}°C</span>
          <span class="l ml10">{{ weatcherData.wea }}</span>
        </div>
        <div class=" header-tip right flex middle">
          <span class="max mr20">{{ nowTime }}</span>
          <li class="date cell-main">
            <div class="l">{{ week }}</div>
            <div class="xl">{{ date }}</div>
          </li>
        </div>
      </div>
      <section class="main flex">
        <div class="part  ">
          <dv-border-box-11 class="datav-card" title="收益率">
            <gauge :height="230" name="收益率" :value="46" />
          </dv-border-box-11>
          <dv-border-box-11 class="datav-card" title="毛利率">
            <waterball :height="230" :chartData="number" />
          </dv-border-box-11>
          <dv-border-box-11 class="datav-card" title="业务范围">
            <wayPie :height="230" :chartData="ways" />
          </dv-border-box-11>
        </div>
        <div class="index-center cell-main col-white ml30 mr30">
          <div class="index-top">
            <div class="flex middle">
              <github :height="180" />
            </div>
          </div>
          <bar3d :height="600" :chartData="{ hours, days, data }" />
        </div>
        <div class="part  ">
          <dv-border-box-11 class="datav-card " title="雷达比较">
            <radar :height="230" :chartData="radar" :radarArea="radarArea" />
          </dv-border-box-11>
          <dv-border-box-11 class="datav-card" title="业务分类">
            <pictorialBar :height="230" :chartData="pictocials" />
          </dv-border-box-11>
          <dv-border-box-11 class="datav-card" title="股价起伏">
            <kline :height="230" :chartData="ks" />
          </dv-border-box-11>
        </div>
      </section>

      <!-- <dv-percent-pond
        :config="{ value: 66, localGradient: true }"
        style="width:200px;height:50px;"
      /> -->
    </div>
  </div>
</template>

<script>
import './index.scss'
import bar3d from './components/bar3d'
import waterball from './components/waterball'
import wayPie from './components/wayPie'
import radar from './components/radar'
import pictorialBar from './components/pictorialBar'
import kline from './components/kline'
import github from './components/github'
import gauge from './components/gauge'
import { dateFormat } from '../utils/index'
export default {
  data() {
    return {
      nowTime: '',
      week: '',
      date: '',
      timer: null,
      imgSrc: '',
      weatcherData: {},
      hours: [
        '0点',
        '1点',
        '2点',
        '3点',
        '4点',
        '5点',
        '6点',
        '7点',
        '8点',
        '9点',
        '10点',
        '11点',
        '12点',
        '13点',
        '14点',
        '15点',
        '16点',
        '17点',
        '18点',
        '19点',
        '20点',
        '21点',
        '22点',
        '23点'
      ],
      days: [
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
        '星期天'
      ],
      data: [
        //[hour, day, val]
        [0, 0, 5],
        [0, 1, 1],
        [0, 2, 0],
        [0, 3, 0],
        [0, 4, 0],
        [0, 5, 0],
        [0, 6, 0],
        [0, 7, 0],
        [0, 8, 0],
        [0, 9, 0],
        [0, 10, 0],
        [0, 11, 2],
        [0, 12, 4],
        [0, 13, 1],
        [0, 14, 1],
        [0, 15, 3],
        [0, 16, 4],
        [0, 17, 6],
        [0, 18, 4],
        [0, 19, 4],
        [0, 20, 3],
        [0, 21, 3],
        [0, 22, 2],
        [0, 23, 5],
        [1, 0, 7],
        [1, 1, 0],
        [1, 2, 0],
        [1, 3, 0],
        [1, 4, 0],
        [1, 5, 0],
        [1, 6, 0],
        [1, 7, 0],
        [1, 8, 0],
        [1, 9, 0],
        [1, 10, 5],
        [1, 11, 2],
        [1, 12, 2],
        [1, 13, 6],
        [1, 14, 9],
        [1, 15, 11],
        [1, 16, 6],
        [1, 17, 7],
        [1, 18, 8],
        [1, 19, 12],
        [1, 20, 5],
        [1, 21, 5],
        [1, 22, 7],
        [1, 23, 2],
        [2, 0, 1],
        [2, 1, 1],
        [2, 2, 0],
        [2, 3, 0],
        [2, 4, 0],
        [2, 5, 0],
        [2, 6, 0],
        [2, 7, 0],
        [2, 8, 0],
        [2, 9, 0],
        [2, 10, 3],
        [2, 11, 2],
        [2, 12, 1],
        [2, 13, 9],
        [2, 14, 8],
        [2, 15, 10],
        [2, 16, 6],
        [2, 17, 5],
        [2, 18, 5],
        [2, 19, 5],
        [2, 20, 7],
        [2, 21, 4],
        [2, 22, 2],
        [2, 23, 4],
        [3, 0, 7],
        [3, 1, 3],
        [3, 2, 0],
        [3, 3, 0],
        [3, 4, 0],
        [3, 5, 0],
        [3, 6, 0],
        [3, 7, 0],
        [3, 8, 1],
        [3, 9, 0],
        [3, 10, 5],
        [3, 11, 4],
        [3, 12, 7],
        [3, 13, 14],
        [3, 14, 13],
        [3, 15, 12],
        [3, 16, 9],
        [3, 17, 5],
        [3, 18, 5],
        [3, 19, 10],
        [3, 20, 6],
        [3, 21, 4],
        [3, 22, 4],
        [3, 23, 1],
        [4, 0, 1],
        [4, 1, 3],
        [4, 2, 0],
        [4, 3, 0],
        [4, 4, 0],
        [4, 5, 1],
        [4, 6, 0],
        [4, 7, 0],
        [4, 8, 0],
        [4, 9, 2],
        [4, 10, 4],
        [4, 11, 4],
        [4, 12, 2],
        [4, 13, 4],
        [4, 14, 4],
        [4, 15, 14],
        [4, 16, 12],
        [4, 17, 1],
        [4, 18, 8],
        [4, 19, 5],
        [4, 20, 3],
        [4, 21, 7],
        [4, 22, 3],
        [4, 23, 0],
        [5, 0, 2],
        [5, 1, 1],
        [5, 2, 0],
        [5, 3, 3],
        [5, 4, 0],
        [5, 5, 0],
        [5, 6, 0],
        [5, 7, 0],
        [5, 8, 2],
        [5, 9, 0],
        [5, 10, 4],
        [5, 11, 1],
        [5, 12, 5],
        [5, 13, 10],
        [5, 14, 5],
        [5, 15, 7],
        [5, 16, 11],
        [5, 17, 6],
        [5, 18, 0],
        [5, 19, 5],
        [5, 20, 3],
        [5, 21, 4],
        [5, 22, 2],
        [5, 23, 0],
        [6, 0, 1],
        [6, 1, 0],
        [6, 2, 0],
        [6, 3, 0],
        [6, 4, 0],
        [6, 5, 0],
        [6, 6, 0],
        [6, 7, 0],
        [6, 8, 0],
        [6, 9, 0],
        [6, 10, 1],
        [6, 11, 0],
        [6, 12, 2],
        [6, 13, 1],
        [6, 14, 3],
        [6, 15, 4],
        [6, 16, 0],
        [6, 17, 0],
        [6, 18, 0],
        [6, 19, 0],
        [6, 20, 1],
        [6, 21, 2],
        [6, 22, 2],
        [6, 23, 6]
      ],
      ways: [
        {
          name: '火车',
          value: 20
        },
        {
          name: '飞机',
          value: 10
        },
        {
          name: '客车',
          value: 30
        },
        {
          name: '轮渡',
          value: 40
        }
      ],
      radar: {
        legend: ['喜欢你', '不知道'],
        data: [[28, 12, 17, 18, 10, 12], [6, 11, 15, 14, 20, 16]]
      },
      radarArea: [
        {
          text: '二面角的定义',
          max: 30
        },
        {
          text: '正棱锥的定义',
          max: 30
        },
        {
          text: '二面角的面',
          max: 30
        },
        {
          text: '直二面角',
          max: 30
        },
        {
          text: '棱锥的定义',
          max: 30
        },
        {
          text: '棱锥的性质',
          max: 30
        }
      ],
      ks: {
        x: [
          '2020/7/20',
          '2020/7/21',
          '2020/7/22',
          '2020/7/23',
          '2020/7/24',
          '2020/7/27',
          '2020/7/28'
        ],
        y: [
          // [开盘值, 收盘值, 最低值, 最高值]
          [3320.26, 3320.26, 3287.3, 3362.94],
          [3300, 3291.3, 3288.26, 3308.38],
          [3295.35, 3346.5, 3295.35, 3346.92],
          [3347.22, 3358.98, 3337.35, 3363.8],
          [3360.75, 3382.48, 3347.89, 3383.76],
          [3383.43, 3485.42, 3371.23, 3491.82],
          [3377.41, 3619.02, 3369.57, 3621.15]
        ]
      },
      pictocials: {
        x: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行'],
        y: [123, 60, 25, 18, 12, 9, 2, 1]
      },
      number: [0.3]
    }
  },

  components: {
    bar3d,
    waterball,
    wayPie,
    radar,
    pictorialBar,
    kline,
    github,
    gauge
  },

  computed: {},

  created() {
    this.queryTemp()
    this.timer = setInterval(() => {
      this.setTime()
    }, 1000)
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  computed: {},

  mounted() {},

  methods: {
    setTime() {
      let [date, week, time] = dateFormat(
        new Date(),
        'yyyy-MM-dd EEE HH:mm:ss'
      ).split(' ')
      this.date = date
      this.week = week
      this.nowTime = time
    },
    queryTemp() {
      axios
        .get('https://www.tianqiapi.com/api/', {
          params: {
            appid: '26148275',
            appsecret: '2id6H48Y',
            version: 'v6'
          }
        })
        .then(res => {
          this.weatcherData = res.data
          this.imgSrc = this.selectPic(res.data.wea_img)
        })
    },
    selectPic(type) {
      const typeMap = {
        xue: require('../assets/img/brand/xue.png'),
        yin: require('../assets/img/brand/yin.png'),
        yu: require('../assets/img/brand/yu.png'),
        bingbao: require('../assets/img/brand/yu.png'),
        yun: require('../assets/img/brand/yun.png'),
        wu: require('../assets/img/brand/wu.png'),
        shachen: require('../assets/img/brand/shachen.png'),
        lei: require('../assets/img/brand/lei.png'),
        qing: require('../assets/img/brand/qing.png')
      }
      return typeMap[type]
    }
  }
}
</script>
<style lang='scss'  scoped>
.three {
  background: url(../assets/img/brand/bg.jpg) no-repeat #000;
  background-size: cover;
  line-height: 1.15;
}
.header {
  position: relative;
  height: 70px;
  color: #fff;
  &-left,
  &-right {
    width: 30%;
    height: 70px;
  }
  &-center {
    width: 40%;
    height: 70px;
    margin-top: 52px;
  }
  &-title {
    position: absolute;
    font-size: 26px;
    letter-spacing: 8px;
    width: 260px;
    height: 64px;
    font-weight: bold;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
  }
  &-tip {
    position: absolute;
    font-size: 20px;
    height: 64px;
    max-width: 300px;

    top: 30px;
    &.left {
      left: 240px;
    }
    &.right {
      right: 240px;
    }
  }
}
.datav-card {
  position: relative;
  height: 300px;
  padding: 50px 20px 0;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.ico {
  width: 24px;
  height: 24px;
}
.index-top {
  height: 170px;
}
</style>